<template>
  <div class="comment-parent-content mt-8 lg:py-10 rounded-2xl mb-8 lg:mb-0" id="comments">
    <div class='comments-title-top'>
      <h6 class="comments-title">{{ commentCount?commentCount: 0 }}条评论</h6>
      <a href='javascript:' data-fancybox data-src="#respond" class="comment-form-button" role="button" @click='respond'>发表评论</a>
    </div>
    <div class="comments-area">
      <CommentList />
    </div>
    <div id='respond' class='comment-respond'>
      <h3 id="reply-title" class="comment-reply-title">发表回复
        <small>
          <a rel="nofollow" id="cancel-comment-reply-link" style="display:none;" tabindex="-1" data-orig-tabindex="-1">取消回复</a>
        </small>
      </h3>
      <CommentForm />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, inject, reactive, toRefs } from 'vue'
import CommentForm from './CommentForm.vue'
import CommentList from './CommentList.vue'
export default defineComponent({
  name: 'Comment',
  props:['commentCount'],
  components: {CommentForm, CommentList },
  setup() {
    const reactiveData = reactive({
      isShowComment: false as boolean
    })
    const respond = () => {
      reactiveData.isShowComment=true
    }
    return {
      comments: inject('comments'),
      ...toRefs(reactiveData),
      respond
    }
  }
})
</script>
<style lang='scss'>
.comment-respond {
  position: relative;
  max-width: var(--content-size);
  padding: 0;
  display: none;
  margin: var(--gap-divs) 0;
}

.comments-title-top {
  display: flex;
  justify-content: space-between;
  height: 1rem;
  margin-bottom: 1.5rem;
}
.comments-title,.comment-form-button {
  font-size: var(--font-size-title);
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  color: var(--color);
  white-space: nowrap;
}
.comments-title::before{
  content: '\e633';
  font-family: 'iconfont';
  line-height: 1;
  margin: 0 0.5em 0 0;
}
.comment-form-button{
  color: var(--color-sub);
}
.comment-form-button::after ,.comment-reply-title::before{
  content: '\e8b4';
  margin: 0 0 0 0.5em;
  font-family: 'iconfont';
  line-height: 1;
}
</style>
